<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flymby - 鸿蒙媒体服务器客户端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }
        }

        /* Header */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .app-icon {
            width: 120px;
            height: 120px;
            border-radius: 20px;
            margin: 0 auto 1rem;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
            overflow: hidden;
        }

        .app-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 480px) {
            .app-icon {
                width: 100px;
                height: 100px;
                margin: 0 auto 0.8rem;
            }
        }

        .app-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @media (max-width: 480px) {
            .app-title {
                font-size: 2.2rem;
            }
        }

        .app-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 1rem;
        }

        @media (max-width: 480px) {
            .app-subtitle {
                font-size: 1rem;
                margin-bottom: 0.8rem;
            }
        }

        .version-badge {
            display: inline-block;
            background: #4CAF50;
            color: white;
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        /* Main Content */
        .main-content {
            background: white;
            margin: 2rem 0;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .section {
            padding: 3rem 2rem;
        }

        .section:nth-child(even) {
            background: #f8f9ff;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-align: center;
            color: #333;
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 1.6rem;
                margin-bottom: 1.2rem;
            }
        }

        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0.5rem auto;
            border-radius: 2px;
        }



        /* Features */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }

        @media (max-width: 480px) {
            .features-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin: 1.5rem 0;
            }
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        @media (max-width: 480px) {
            .feature-card {
                padding: 1.5rem;
                border-radius: 12px;
            }
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin-bottom: 1rem;
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .feature-list {
            list-style: none;
        }

        .feature-list li {
            margin-bottom: 0.5rem;
            padding-left: 1.5rem;
            position: relative;
            color: #666;
        }

        .feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #4CAF50;
            font-weight: bold;
        }

        /* Tech Stack */
        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin: 2rem 0;
        }

        @media (max-width: 480px) {
            .tech-stack {
                gap: 0.8rem;
                margin: 1.5rem 0;
            }
        }

        .tech-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        @media (max-width: 480px) {
            .tech-badge {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }
        }

        /* Requirements */
        .requirements-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        @media (max-width: 480px) {
            .requirements-list {
                grid-template-columns: 1fr;
                gap: 1rem;
                margin: 1.5rem 0;
            }
        }

        .requirement-item {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            border-left: 4px solid #667eea;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        @media (max-width: 480px) {
            .requirement-item {
                padding: 1.2rem;
            }
        }

        .requirement-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
        }

        /* Footer */
        .footer {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 2rem 0;
            text-align: center;
            margin-top: 2rem;
        }

        .developer-info {
            margin-bottom: 1rem;
        }

        .contact-info {
            color: #666;
            font-size: 0.9rem;
        }

        .contact-info a {
            color: #667eea;
            text-decoration: none;
        }

        .contact-info a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .app-title {
                font-size: 2.5rem;
            }

            .section {
                padding: 2rem 1rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .header {
                padding: 1.5rem 0;
            }
        }

        @media (max-width: 480px) {
            .section {
                padding: 1.5rem 1rem;
            }

            .header {
                padding: 1.2rem 0;
            }

            .main-content {
                margin: 1rem 0;
            }

            .footer {
                padding: 1.5rem 0;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <div class="container">
            <div class="app-icon">
                <img src="https://www.wzhi.top/zb_users/upload/2025/06/202506061749184118372897.png" alt="Flymby App Icon">
            </div>
            <h1 class="app-title">Flymby</h1>
            <p class="app-subtitle">鸿蒙媒体服务器客户端</p>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container">
        <div class="main-content">
            <!-- About Section -->
            <div class="section">
                <h2 class="section-title">应用简介</h2>
                <p style="text-align: center; font-size: 1.1rem; color: #666; max-width: 800px; margin: 0 auto;">
                    Flymby 是一款专为鸿蒙系统（HarmonyOS）开发的多媒体服务器客户端应用。它为用户提供 Emby 媒体服务器的完整连接、管理和内容播放功能，同时规划支持 AudioBookShelf 等其他媒体服务器，为用户提供统一的媒体播放体验。
                </p>
            </div>



            <!-- Features Section -->
            <div class="section">
                <h2 class="section-title">主要功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🎬</div>
                        <h3 class="feature-title">视频服务器支持</h3>
                        <ul class="feature-list">
                            <li>Emby 服务器管理</li>
                            <li>媒体播放支持</li>
                            <li>多播放器支持 (wlmedia & ijkplayer)</li>
                            <li>播放记录和断点续播</li>
                            <li>字幕支持</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎧</div>
                        <h3 class="feature-title">音频服务器支持</h3>
                        <ul class="feature-list">
                            <li>AudioBookShelf 集成（规划中）</li>
                            <li>有声书播放</li>
                            <li>章节导航</li>
                            <li>播放速度调节</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">⚙️</div>
                        <h3 class="feature-title">通用功能</h3>
                        <ul class="feature-list">
                            <li>收藏管理</li>
                            <li>快速搜索</li>
                            <li>个性化设置</li>
                            <li>自适应布局</li>
                            <li>隐私保护</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Tech Stack Section -->
            <div class="section">
                <h2 class="section-title">技术构成</h2>
                <div class="tech-stack">
                    <span class="tech-badge">HarmonyOS/ArkTS</span>
                    <span class="tech-badge">ArkUI</span>
                    <span class="tech-badge">PullToRefresh</span>
                    <span class="tech-badge">IJKPlayer</span>
                    <span class="tech-badge">ZRouter</span>
                    <span class="tech-badge">Harmony Utils</span>
                    <span class="tech-badge">WLMedia</span>
                </div>
            </div>

            <!-- Requirements Section -->
            <div class="section">
                <h2 class="section-title">安装要求</h2>
                <div class="requirements-list">
                    <div class="requirement-item">
                        <div class="requirement-title">设备要求</div>
                        <div>鸿蒙系统设备（手机、平板或二合一设备）</div>
                    </div>
                    <div class="requirement-item">
                        <div class="requirement-title">系统版本</div>
                        <div>兼容最新版本鸿蒙系统</div>
                    </div>
                    <div class="requirement-item">
                        <div class="requirement-title">服务器要求</div>
                        <div>Emby 媒体服务器（版本 4.0 及以上）</div>
                    </div>
                    <div class="requirement-item">
                        <div class="requirement-title">可选服务器</div>
                        <div>AudioBookShelf 服务器（规划支持）</div>
                    </div>
                </div>
            </div>

            <!-- Usage Guide Section -->
            <div class="section">
                <h2 class="section-title">使用指南</h2>
                <div style="max-width: 800px; margin: 0 auto;">
                    <div style="margin-bottom: 2rem;">
                        <h4 style="color: #667eea; margin-bottom: 1rem; font-size: 1.1rem;">1. 首次使用</h4>
                        <p style="color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6;">• 启动应用后，需要同意隐私政策</p>
                        <p style="color: #666; font-size: 0.95rem; line-height: 1.6;">• 添加您的媒体服务器</p>
                    </div>
                    <div style="margin-bottom: 2rem;">
                        <h4 style="color: #667eea; margin-bottom: 1rem; font-size: 1.1rem;">2. 添加 Emby 服务器</h4>
                        <p style="color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6;">• 进入"服务"标签页，点击右上角"+"按钮</p>
                        <p style="color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6;">• 选择 Emby 服务器类型</p>
                        <p style="color: #666; font-size: 0.95rem; line-height: 1.6;">• 输入服务器信息并测试连接</p>
                    </div>
                    <div style="margin-bottom: 2rem;">
                        <h4 style="color: #667eea; margin-bottom: 1rem; font-size: 1.1rem;">3. 浏览和播放</h4>
                        <p style="color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6;">• 在首页浏览可用媒体内容</p>
                        <p style="color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6;">• 支持按分类、最新更新等方式浏览</p>
                        <p style="color: #666; font-size: 0.95rem; line-height: 1.6;">• 点击内容项目进行播放</p>
                    </div>
                </div>
            </div>

            <!-- Supported Servers Section -->
            <div class="section">
                <h2 class="section-title">支持的服务器</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
                    <div style="text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);">
                        <div style="font-size: 3rem; margin-bottom: 1rem;">✅</div>
                        <h3 style="color: #4CAF50; margin-bottom: 1rem;">当前支持</h3>
                        <p style="font-weight: 600; margin-bottom: 0.5rem;">Emby</p>
                        <p style="color: #666; font-size: 0.9rem;">完整功能支持，包括视频/音频播放、用户认证、媒体管理等</p>
                    </div>
                    <div style="text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);">
                        <div style="font-size: 3rem; margin-bottom: 1rem;">🚀</div>
                        <h3 style="color: #FF9800; margin-bottom: 1rem;">规划支持</h3>
                        <p style="font-weight: 600; margin-bottom: 0.5rem;">AudioBookShelf</p>
                        <p style="color: #666; font-size: 0.9rem;">有声书服务器支持（开发中）</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <div class="container">
            <div class="developer-info">
                <h3 style="margin-bottom: 0.5rem; color: #333;">开发者</h3>
                <p style="color: #666; margin-bottom: 1rem;">史健廷</p>
                <p style="color: #666; margin-bottom: 1rem;">QQ交流群：442125481</p>
                <p style="font-size: 0.9rem; color: #666;">特别鸣谢 <a href="https://github.com/ywl5320/wlmedia" target="_blank">wlmedia</a> 赞助本项目的播放器功能</p>
            </div>
            <div class="contact-info">
                <p>隐私相关问题请联系: <a href="mailto:freedomnanjing@gmail.com">freedomnanjing@gmail.com</a></p>
                <p style="margin-top: 1rem; color: #999; font-size: 0.8rem;">© 2024 Flymby. 严格遵守隐私保护规范</p>
            </div>
        </div>
    </div>
</body>
</html>
